<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles"
	prefix="tiles"%>


		<rich:panel header="#{messages['package.setup.label']}">
			<h:panelGrid>
				<h:outputText value="#{errorBean.errorMessage}" styleClass="error"></h:outputText>
			</h:panelGrid>

			<h:panelGrid width="100%">
				<h:panelGroup>
				    <h:outputText value="#{messages['package.info.label']}" styleClass="sub_header" />
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputText value="#{messages['instruction']}" styleClass="standardText_Instruction" />
				</h:panelGroup>
			</h:panelGrid>

			<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
				<h:outputText></h:outputText>
				<t:message for="packageCode" styleClass="error"></t:message>
				
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="packageCode" value="#{messages['package.code.label']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
					<t:inputText id="packageCode" required="true" size="20" maxlength="20" styleClass="standardText" value=""></t:inputText>
				</h:panelGroup>
			
				<h:outputText></h:outputText>
				<t:message for="packageDesc" styleClass="error"></t:message>
				
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="packageDesc" value="#{messages['package.desc.label']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
					<t:inputText id="packageDesc" required="true" size="50" maxlength="50" styleClass="standardText" value=""></t:inputText>
				</h:panelGroup>
				
				<h:outputLabel for="packagePromotion" value="#{messages['package.promotion.label']}" styleClass="standardText_Label" />
				<h:selectBooleanCheckbox id="packagePromotion"></h:selectBooleanCheckbox>
				
				<h:outputText></h:outputText>
				<t:message for="packageChargeType" styleClass="error"></t:message>
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="packageChargeType" value="#{messages['package.charge.type.label']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
					<t:selectOneMenu id="packageChargeType" styleClass="standardText" value="" required="true">
						<f:selectItem itemLabel="#{messages['please.select']}" itemValue="" />
						<f:selectItem itemLabel="Cash Only" itemValue="" />
						<f:selectItem itemLabel="Point Only" itemValue="" />
						<f:selectItem itemLabel="Cash & Point" itemValue="" />
					</t:selectOneMenu>
				</h:panelGroup>
				
				<%-- 
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="priceMarkup" value="#{messages['package.product.price.markup.label']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
					<t:inputText id="priceMarkup" required="true" size="3" maxlength="3" styleClass="standardText" value=""></t:inputText>
					<h:outputText value="%" styleClass="standardText" />
				</h:panelGroup>
				--%>
				
				<h:panelGroup>
			    	<h:outputText value="*" styleClass="standardText_Mandatory" />	
				    <h:outputLabel for="effectiveDate" value="#{messages['effective.date.label']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
				    	<t:inputCalendar
				    	id="effectiveDate"
							monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader" 
							currentDayCellClass="currentDayCell" value=""
							renderAsPopup="true" popupTodayString="#{messages['popup.today']}"
							popupWeekString="#{messages['popup.week']}" popupDateFormat="dd/MM/yyyy"
							renderPopupButtonAsImage="true"
							styleClass="standardText" required="true"
				    	>
				    	</t:inputCalendar>
				</h:panelGroup>
				
				<h:panelGroup>
			    	<h:outputText value="*" styleClass="standardText_Mandatory" />	
				    <h:outputLabel for="expiryDate" value="#{messages['expiry.date.label']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
				    	<t:inputCalendar
				    	id="expiryDate"
							monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader" 
							currentDayCellClass="currentDayCell" value=""
							renderAsPopup="true" popupTodayString="#{messages['popup.today']}"
							popupWeekString="#{messages['popup.week']}" popupDateFormat="dd/MM/yyyy"
							renderPopupButtonAsImage="true"
							styleClass="standardText" required="true"
				    	>
				    	</t:inputCalendar>
				</h:panelGroup>
	    
			</t:panelGrid>
			
			<rich:spacer height="10"></rich:spacer>
			
			<h:panelGrid width="100%">
				<h:outputText value="#{messages['package.element.label']}" styleClass="sub_header" />
			</h:panelGrid>
			
			<h:panelGrid width="100%" columns="1">
			    <h:panelGroup>
				    <rich:dataTable id="data" var="demo" value="#{demoBean.productList}" rows="20" width="99%">
						<rich:column style="text-align:center;width:5%;" >
							<f:facet name="header">
								<h:selectBooleanCheckbox id="chkAll" onclick="checkAll(this.form,this)" ></h:selectBooleanCheckbox>
							</f:facet>
							<h:selectBooleanCheckbox id="chk" value=""></h:selectBooleanCheckbox>
						</rich:column>
						
						<rich:column style="text-align:center;width:20%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.code.column']}"></h:outputText>
							</f:facet>
							<h:outputText value="#{demo.label}"></h:outputText>
						</rich:column>
						
						<rich:column style="text-align:center;width:20%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.desc.column']}"></h:outputText>
							</f:facet>
							<h:outputText value="#{demo.action}"></h:outputText>
						</rich:column>
						
						<rich:column style="text-align:center;width:20%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.qty.column']}"></h:outputText>
							</f:facet>
							<h:outputText value="1"></h:outputText>
						</rich:column>
						
						<rich:column style="text-align:center;width:20%;">
							<f:facet name="header">
								
								<h:panelGrid columns="1">
									<h:outputText value="#{messages['product.weekend.points.column']}" styleClass="standardText_Label"></h:outputText>
									
									<h:panelGroup>
										<h:panelGrid columns="3" align="left">
											<h:outputText value="#{messages['product.super.peak.column']}" styleClass="standardText_Label"></h:outputText>
											<h:outputText value="#{messages['product.peak.column']}" styleClass="standardText_Label"></h:outputText>
											<h:outputText value="#{messages['product.normal.column']}" styleClass="standardText_Label"></h:outputText>
										</h:panelGrid>
									</h:panelGroup>	
								</h:panelGrid>
							</f:facet>
							<h:panelGrid columns="3">
								<t:inputText required="true" size="2" maxlength="2" styleClass="standardText" value=""></t:inputText>
								<t:inputText required="true" size="2" maxlength="2" styleClass="standardText" value=""></t:inputText>
								<t:inputText required="true" size="2" maxlength="2" styleClass="standardText" value=""></t:inputText>
							</h:panelGrid>
						</rich:column>
						
						<rich:column style="text-align:center;width:20%;">
							<f:facet name="header">
								<h:panelGrid columns="1">
									<h:outputText value="#{messages['product.weekday.points.column']}" styleClass="standardText_Label"></h:outputText>
									<h:panelGroup>
										<h:panelGrid columns="3">
											<h:outputText value="#{messages['product.super.peak.column']}" styleClass="standardText_Label"></h:outputText>
											<h:outputText value="#{messages['product.peak.column']}" styleClass="standardText_Label"></h:outputText>
											<h:outputText value="#{messages['product.normal.column']}" styleClass="standardText_Label"></h:outputText>
										</h:panelGrid>
									</h:panelGroup>	
								</h:panelGrid>
							</f:facet>
							<h:panelGrid columns="3">
								<t:inputText required="true" size="2" maxlength="2" styleClass="standardText" value=""></t:inputText>
								<t:inputText required="true" size="2" maxlength="2" styleClass="standardText" value=""></t:inputText>
								<t:inputText required="true" size="2" maxlength="2" styleClass="standardText" value=""></t:inputText>
							</h:panelGrid>
						</rich:column>
						
						<rich:column style="text-align:center;width:10%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.list.price.column']}"></h:outputText>
							</f:facet>
							<h:outputText value="RM120"></h:outputText>
						</rich:column>
						
						<rich:column style="text-align:center;width:10%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.super.peak.price.column']}"></h:outputText>
							</f:facet>
							<t:inputText required="true" size="3" maxlength="3" styleClass="standardText" value="%"></t:inputText>
						</rich:column>
						
						<rich:column style="text-align:center;width:10%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.peak.price.column']}"></h:outputText>
							</f:facet>
							<t:inputText required="true" size="3" maxlength="3" styleClass="standardText" value="1"></t:inputText>
						</rich:column>
						
						<rich:column style="text-align:center;width:10%;">
							<f:facet name="header">
								<h:outputText value="#{messages['product.normal.price.column']}"></h:outputText>
							</f:facet>
							<t:inputText required="true" size="3" maxlength="3" styleClass="standardText" value="1"></t:inputText>
						</rich:column>
					</rich:dataTable> 
				</h:panelGroup>
				
				<h:panelGroup>
					<h:panelGrid columns="10" align="right">
						<h:outputText value="#{messages['package.total.we.sp.point.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
					    <h:outputText value="#{messages['package.total.we.p.point.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
						<h:outputText value="#{messages['package.total.we.n.point.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
												
						<h:outputText value="#{messages['package.total.wd.sp.point.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
					    <h:outputText value="#{messages['package.total.wd.p.point.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
						<h:outputText value="#{messages['package.total.wd.n.point.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
						<h:outputText value="#{messages['package.total.sp.price.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
						<h:outputText value="#{messages['package.total.p.price.label']}" styleClass="standardText_Label" />
						<h:outputText value="200" styleClass="standardText" />
						
						<h:outputText value="#{messages['package.total.n.price.label']}" styleClass="standardText_Label" />
						<h:outputText value="1,599" styleClass="standardText" />
					</h:panelGrid>
				</h:panelGroup>
			</h:panelGrid>
			
			<rich:datascroller align="left"  for="data" maxPages="20" />
			
			<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
				<h:outputText></h:outputText>
				<t:panelGrid columns="2">
					<h:commandButton value="#{messages['add.new.product.button']}" styleClass="button"></h:commandButton>
					<h:commandButton value="#{messages['remove.product.button']}" styleClass="button"></h:commandButton>
				</t:panelGrid>
			</t:panelGrid>
			
			<rich:spacer height="10"></rich:spacer>
			
			<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
				<h:outputText></h:outputText>
				<t:panelGrid columns="2">
					<h:commandButton value="#{messages['create']}" styleClass="button"></h:commandButton>
					<h:commandButton value="#{messages['back']}" styleClass="button"></h:commandButton>
				</t:panelGrid>
			</t:panelGrid>
			
		</rich:panel>
